<template>
    <div class="action">
        <div>
           <Button type="info" :loading="loading" @click="actionTrigger">{{actionModel.name}}</Button>
        </div>
        <Modal v-model="modalShow" class="modal-full" :title="actionModel.name" :width="800">
            <div class="json-editor" v-if="modalShow">
                <CodeEditor v-model="text" lang="json"></CodeEditor>
            </div>
            <div slot="footer" class="button-panel-button">
                <i-button @click="modalShow=false">取消</i-button>
                <i-button @click="actionSubmit" type="primary">保存</i-button>
                <!---->
            </div>
        </Modal>
    </div>
</template>
<script>
import base from "../actionBase";
import CodeEditor from '@/element/codeEditor'
import $ from '@/common'
export default {
       extends: base,
       components: {
        CodeEditor
       },
       data() {
           return {
               modalShow: false,
               text: ''
           }
       },
       methods: {
         actionTrigger() {
             this.modalShow = !this.modalShow
         },
         actionSubmit() {
            var data
            try {
                data = JSON.parse(this.text)
            } catch (ex) {
                this.$Notice.error({
                    title: 'JSON格式错误请检查'
                });
                console.warn(ex)
                return
            }
            $.link(this.modelParam('path_submit'), data,{
                param: this.$owner.$refs.search.$refs.form.formData
            }).then(() => {
                this.modalShow = false;
            })
        } 
    },    
}
</script>
<style>
.json-editor .CodeMirror {
    height:100%;
}
</style>

